<template>
  <section class="c-p" :class="[!isSetPageBackground? 'c-bg-white' : '', currentVideoPlayerIndex == index ? 'c-pz100' : 'c-pz1']">
    <div class="c-w100 c-ph24 c-pv24 videoBox" :id="'videoBox' + index" :style="getVerticalSpacing(marginSettings) + getHorizontalSpacing(marginSettings)">
      <div class="c-w100">
        <!-- 一行两列 -->
        <template v-if="item.items.orderBy == 2">
          <div class="c-flex-row c-flexw-wrap c-justify-sb" >
            <div class="w50-12 c-text-hidden c-flex-column c-p"
              :class="isSetMarginBottom(pIndex, item.items.prods, 2) ? 'c-mb24' : ''"
              :style="getInnerSpacingWidth(marginSettings, 1) + getInnerSpacing(marginSettings, 1, isSetMarginBottom(pIndex, item.items.prods, 2))"
              v-for="(prod, pIndex) in item.items.prods" :key="pIndex"
            >
              <div class="c-box-shadowEdu c-p c-text-hidden" :style="getImageRatio(imageSetting, prod.width / prod.height)">
                <div
                  :id="'_' + index + 'myVideo' + pIndex"
                  class="c-w100-im c-pa c-p-l0 c-p-t0 c-text-hidden transform0"
                  style="width:100%; height:auto;"
                  :style="!isSetPageBackground ? getBorderRadius(borderRadius, '0.4rem') : getBorderRadius(borderRadius, '0.4rem', visible.titleVisible && visible.titleVisible != 0 ? 'top' : '')"
                ></div>
                <div class="c-w100 c-h c-text-hidden c-p c-pz10" :style="(!isSetPageBackground ? getBorderRadius(borderRadius, '0.4rem') : getBorderRadius(borderRadius, '0.4rem', visible.titleVisible && visible.titleVisible != 0 ? 'top' : ''))" @click="clickShowVideo(pIndex, 2)">
                  <custom-img class="c-w100 c-h c-text-hidden" :imageSetting="imageSetting" :url="$addXossFilter(prod.videoCover, defaultVideoBg)"></custom-img>
                  <div class="c-pa c-p-t0 c-p-l0 c-w100 c-h c-flex-row c-flex-center c-pz10 c-text-hidden">
                    <div class="c-ww60 c-hh60 c-brp50">
                      <img class="c-w100 c-h" src="@/assets/i/wap/index/videoBtn.png" alt="">
                    </div>
                  </div>
                </div>
                <div @click="clickMore(pIndex)" v-if="prod.navId" :style="getBorderRadius(borderRadius, '0.4rem', 'top-right')" class="c-fc-white c-fs18 c-translucent-balck40 c-pa c-p-t0 c-p-r0 c-hh32 c-lh32 c-pl12 c-pr8 br-l-16 c-pz10 c-flex-row c-aligni-center">
                  详情
                  <span class="iconfont c-pl6 c-fs18">&#xe635;</span>
                  <template v-if="prod.info && prod.info.appID">
                    <wx-open-launch-weapp
                      :id="'launchBtn'"
                      :appId="prod.info.appID"
                      :path="prod.info.wechatUrl"
                      class="c-w100 c-h c-text-hidden c-pa c-p-t0 c-p-l0"
                      @error="handleErrorFn"
                      @launch="handleLaunch"
                      @ready="handleReady"
                    >
                      <script type="text/wxtag-template">
                        <style>.masker {width: 100%;height: 70px;opacity: 0}</style>
                        <span class="masker">立即跳转</span>
                      </script>
                    </wx-open-launch-weapp>
                  </template>
                </div>
              </div>
              <div class="c-bg-white c-text-hidden" :style="(isSetPageBackground ? getBorderRadius(borderRadius, '0.4rem', 'bottom') : '')" :class="isSetPageBackground ? 'c-ph12 c-pv12' : 'c-pt12'" v-if="visible.titleVisible && visible.titleVisible != 0">
                <div
                  class="c-fc-xblack c-fw-b c-fs24 c-lh32 c-pz10 c-w100 c-flex-1"
                  :class="visible.titleVisible == 1 ? 'c-text-ellipsis1' : 'c-text-ellipsis2'"
                >
                  {{prod.objName}}
                </div>
              </div>
            </div>
          </div>
        </template>
        <!-- 单个/一行一列视频 -->
        <template v-if="item.items.orderBy == 4">
          <div
            class="c-text-hidden c-p"
            :class="pIndex != item.items.prods.length - 1 ? 'c-mb24' : ''"
            style="width:100%;" :style="getInnerSpacing(marginSettings, 1, pIndex != item.items.prods.length - 1)"
            v-for="(prod, pIndex) in item.items.prods" :key="pIndex"
          >
            <div class="c-text-hidden">
              <div :style="getImageRatio(imageSetting)" class="c-text-hidden c-p" @click="playVideo(pIndex)">
                <div
                  :id="'_' + index + 'myVideo' + pIndex"
                  class="c-w100-im c-text-hidden c-p transform0"
                  style="width:100%; height:auto;"
                  :style="isSetPageBackground ? getBorderRadius(borderRadius, '0.4rem', visible.titleVisible && visible.titleVisible != 0 ? 'top' : '') : getBorderRadius(borderRadius, '0.4rem')"
                ></div>
                <div v-show="prod.isShowBtn" class="c-pa c-p-l0 c-p-t0 c-w100 c-h c-text-hidden c-pz10" :style="isSetPageBackground ? getBorderRadius(borderRadius, '0.4rem', visible.titleVisible && visible.titleVisible != 0 ? 'top' : '') : getBorderRadius(borderRadius, '0.4rem')">
                  <custom-img class="c-w100 c-h c-text-hidden" :imageSetting="imageSetting" :url="$addXossFilter(prod.videoCover, defaultVideoBg)"></custom-img>
                  <div class="c-pa c-p-t0 c-p-l0 c-w100 c-h c-flex-row c-flex-center c-pz10 c-text-hidden">
                    <div class="c-ww80 c-hh80 c-brp50">
                      <img class="c-w100 c-h" src="@/assets/i/wap/index/videoBtn.png" alt="">
                    </div>
                  </div>
                </div>
                <div @click="clickMore(pIndex)" v-if="prod.navId" class="c-fc-white c-fs18 c-translucent-balck40 c-hh32 c-lh32 c-pl12 c-pr6 c-ml10 c-br16 c-flex-row c-aligni-center c-pz10 c-pa c-p-t0 c-p-r8 c-p-t8">
                  详情
                  <span class="iconfont c-pl6 c-fs18">&#xe635;</span>
                  <template v-if="prod.info && prod.info.appID">
                    <wx-open-launch-weapp
                      :id="'launchBtn'"
                      :appId="prod.info.appID"
                      :path="prod.info.wechatUrl"
                      class="c-w100 c-h c-text-hidden c-pa c-p-t0 c-p-l0"
                      @error="handleErrorFn"
                      @launch="handleLaunch"
                      @ready="handleReady"
                    >
                      <script type="text/wxtag-template">
                        <style>.masker {width: 100%;height: 70px;opacity: 0}</style>
                        <span class="masker">立即跳转</span>
                      </script>
                    </wx-open-launch-weapp>
                  </template>
                </div>
              </div>
            </div>
            <div class="c-bg-white c-text-hidden" :style="(isSetPageBackground ? getBorderRadius(borderRadius, '0.4rem', 'bottom') : '')" :class="isSetPageBackground ? 'c-ph12 c-pv12' : 'c-pt12'" v-if="visible.titleVisible && visible.titleVisible != 0">
              <div
                class="c-fc-xblack c-fw-b c-fs28 c-lh36 c-pz10 c-w100"
                :class="visible.titleVisible == 1 ? 'c-text-ellipsis1' : 'c-text-ellipsis2'"
              >
                {{prod.objName}}
              </div>
            </div>
          </div>
        </template>
        <!-- 一行多列 -->
        <template v-if="item.items.orderBy == 5">
          <div class=" c-contextX-scroll c-flex-row c-ws-n">
            <div class="c-flex-row">
              <div
                class="c-ww260 c-text-hidden c-mr24 c-p c-flex-column transform0"
                :style="getInnerSpacing(marginSettings, 2)"
                v-for="(prod, pIndex) in item.items.prods" :key="pIndex"
              >
                <div class="c-w100 c-inlineblack c-text-hidden" :class="isSetPageBackground ? '' : 'c-bd1'" :style="getBorderRadius(borderRadius, '0.4rem')">
                  <div class="c-p c-text-hidden">
                    <div
                      :id="'_' + index + 'myVideo' + pIndex"
                      class="c-w100-im c-pa c-p-l0 c-p-t0 c-h c-text-hidden transform0"
                      style="width:100%; height:auto;"
                      :style="isSetPageBackground ? getBorderRadius(borderRadius, '0.4rem', visible.titleVisible && visible.titleVisible != 0 ? 'top' : '') : getBorderRadius(borderRadius, '0.4rem')"
                    ></div>
                    <div class="c-ww260 c-text-hidden c-p c-pz10" :style="getImageRatio(imageSetting, prod.width / prod.height)" @click="clickShowVideo(pIndex, 2)">
                      <custom-img class="c-w100 c-h c-text-hidden"  :imageSetting="imageSetting" :url="$addXossFilter(prod.videoCover, defaultVideoBg)"></custom-img>
                      <div class="c-pa c-p-t0 c-p-l0 c-w100 c-h c-flex-row c-flex-center c-pz10 c-text-hidden">
                        <div class="c-ww60 c-hh60 c-brp50">
                          <img class="c-w100 c-h" src="@/assets/i/wap/index/videoBtn.png" alt="">
                        </div>
                      </div>
                      <div v-if="prod.navId" @click="clickMore(pIndex)" :style="getBorderRadius(borderRadius, '0.4rem', 'top-right')" class="c-fc-white c-fs18 c-translucent-balck40 c-pa c-p-t0 c-p-r0 c-hh32 c-lh32 c-pl12 c-pr8 br-l-16 c-pz10 c-flex-row c-aligni-center">
                        详情
                        <span class="iconfont c-pl6 c-fs18">&#xe635;</span>
                        <template v-if="prod.info && prod.info.appID">
                          <wx-open-launch-weapp
                            :id="'launchBtn'"
                            :appId="prod.info.appID"
                            :path="prod.info.wechatUrl"
                            class="c-w100 c-h c-text-hidden c-pa c-p-t0 c-p-l0"
                            @error="handleErrorFn"
                            @launch="handleLaunch"
                            @ready="handleReady"
                          >
                            <script type="text/wxtag-template">
                              <style>.masker {width: 100%;height: 70px;opacity: 0}</style>
                              <span class="masker">立即跳转</span>
                            </script>
                          </wx-open-launch-weapp>
                        </template>
                      </div>
                    </div>
                  </div>
                  <div class="c-text-hidden" :style="(isSetPageBackground ? getBorderRadius(borderRadius, '0.4rem', 'bottom') : '')">
                    <div class="c-flex-column c-flex-1 c-text-hidden c-ws-bs c-bg-white">
                      <div
                        class="c-fc-xblack c-fw-b c-fs24 c-lh32 c-pz10 c-ph12 c-pv12"
                        :class="isSetPageBackground ? 'c-ph12 c-pv12' : 'c-pt12'"
                        v-if="visible.titleVisible && visible.titleVisible != 0"
                      >
                        <div :class="visible.titleVisible == 1 ? 'c-text-ellipsis1' : 'c-text-ellipsis2'">
                          {{prod.objName}}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
        <!-- 瀑布流 -->
        <template v-if="item.items.orderBy == 8">
          <div class="c-text-hidden">
            <water-fall v-model="prods" ref="waterFallList" class="c-p">
              <template v-slot:list="{list}">
                <div class="w100-12 c-text-hidden c-mb30 c-p"
                  :style="getInnerSpacingWidth(marginSettings, 2) + getInnerSpacing(marginSettings, 1, pIndex != list.length - 1) + (isSetPageBackground ? getBorderRadius(borderRadius, '0.4rem') : '')"
                  :class="[pIndex != list.length - 1 ? 'c-mb24' : '', videoIndex == prod.iId ? 'c-pz999' : 'c-pz1']"
                  v-for="(prod, pIndex) in list" :key="pIndex">
                  <div class="c-p c-text-hidden" :style="(!isSetPageBackground ? getBorderRadius(borderRadius, '0.4rem') : '') + getImageRatio(imageSetting, prod.width / prod.height)">
                    <div
                      :id="'_' + index + 'myVideo' + prod.iId"
                      class="c-w100-im c-pa c-p-l0 c-p-t0 c-text-hidden transform0"
                      style="width:100%; height:auto;"
                      :style="(!isSetPageBackground ? getBorderRadius(borderRadius, '0.4rem') : getBorderRadius(borderRadius, '0.4rem', 'top'))"
                    ></div>
                    <div class="c-w100 c-h c-p c-text-hidden" :style="(!isSetPageBackground ? getBorderRadius(borderRadius, '0.4rem') : getBorderRadius(borderRadius, '0.4rem', 'top'))" @click="clickShowVideo(prod.iId, 2 )">
                      <custom-img class="c-w100 c-h c-text-hidden" :imageSetting="imageSetting" :url="$addXossFilter(prod.videoCover, defaultVideoBg)"></custom-img>
                      <div class="c-pa c-p-t0 c-p-l0 c-w100 c-h c-flex-row c-flex-center c-pz10 c-text-hidden">
                        <div class="c-ww60 c-hh60 c-brp50">
                          <img class="c-w100 c-h" src="@/assets/i/wap/index/videoBtn.png" alt="">
                        </div>
                      </div>
                    </div>
                    <div @click="clickMore(prod.iId)" v-if="prod.navId" class="c-fc-white c-fs18 c-translucent-balck40 c-pa c-p-t0 c-p-r0 c-hh32 c-lh32 c-pl12 c-pr8 br-l-16 c-pz10 c-flex-row c-aligni-center">
                      详情
                      <span class="iconfont c-pl6 c-fs18">&#xe635;</span>
                      <template v-if="prod.info && prod.info.appID">
                        <wx-open-launch-weapp
                          :id="'launchBtn'"
                          :appId="prod.info.appID"
                          :path="prod.info.wechatUrl"
                          class="c-w100 c-h c-text-hidden c-pa c-p-t0 c-p-l0"
                          @error="handleErrorFn"
                          @launch="handleLaunch"
                          @ready="handleReady"
                        >
                          <script type="text/wxtag-template">
                            <style>.masker {width: 100%;height: 70px;opacity: 0}</style>
                            <span class="masker">立即跳转</span>
                          </script>
                        </wx-open-launch-weapp>
                      </template>
                    </div>
                  </div>
                  <!-- 瀑布流不做标题展示控制 -->
                  <div class="c-bg-white" :class="isSetPageBackground ? 'c-ph12 c-pv12' : 'c-pt12'">
                    <div
                      class="c-fc-xblack c-fw-b c-fs24 c-lh32 c-pz10 c-w100 c-text-ellipsis2"
                      @click="clickMore(pIndex)"
                    >
                      {{prod.objName}}
                    </div>
                  </div>
                </div>
              </template>
            </water-fall>
          </div>
        </template>
        <!-- 轮播视频 -->
        <template v-if="item.items.orderBy == 9 && swiperOption">
          <swiper :options="swiperOption" class="mySwiper" :ref="'mySwiper' + index">
            <swiper-slide v-for="(prod, pIndex) in item.items.prods" :key="pIndex" class="c-w100 c-h c-text-hidden transform0">
              <div class="c-w100 c-h c-text-hidden c-p">
                <div
                  :id="'_' + index + 'myVideo' + pIndex"
                  class="c-w100-im c-text-hidden c-p transform0"
                  style="width:100%;height: auto;" :style="isSetPageBackground ? getBorderRadius(borderRadius, '0.4rem', visible.titleVisible && visible.titleVisible != 0 ? 'top' : '') : getBorderRadius(borderRadius, '0.4rem')"
                ></div>
                <div v-show="prod.isShowBtn" class="c-pa c-p-l0 c-p-t0 c-w100 c-h c-text-hidden c-pz10" :style="getImageRatio(imageSetting) + (isSetPageBackground ? getBorderRadius(borderRadius, '0.4rem', visible.titleVisible && visible.titleVisible != 0 ? 'top' : '') : getBorderRadius(borderRadius, '0.4rem'))" @click="playVideo(pIndex)">
                  <custom-img class="c-w100 c-h c-text-hidden" :imageSetting="imageSetting" :url="$addXossFilter(prod.videoCover, defaultVideoBg)"></custom-img>
                  <div class="c-pa c-p-t0 c-p-l0 c-w100 c-h c-flex-row c-flex-center c-pz10 c-text-hidden">
                    <div class="c-ww80 c-hh80 c-brp50">
                      <img class="c-w100 c-h" src="@/assets/i/wap/index/videoBtn.png" alt="">
                    </div>
                  </div>
                </div>
                <div class="c-pa c-p-t0 c-p-r8 c-p-t8 c-pz10 c-flex-row c-aligni-center">
                  <div class="c-fc-white c-fs18 c-translucent-balck40 c-hh32 c-lh32 c-ph12 c-br16">
                    {{pIndex + 1}}/{{item.items.prods.length}}
                  </div>
                  <div @click="clickMore(pIndex)" v-if="prod.navId" class="c-fc-white c-fs18 c-translucent-balck40 c-hh32 c-lh32 c-pl12 c-pr6 c-ml10 c-br16 c-flex-row c-aligni-center">
                    详情
                    <span class="iconfont c-pl6 c-fs18">&#xe635;</span>
                    <template v-if="prod.info && prod.info.appID">
                      <wx-open-launch-weapp
                        :id="'launchBtn'"
                        :appId="prod.info.appID"
                        :path="prod.info.wechatUrl"
                        class="c-w100 c-h c-text-hidden c-pa c-p-t0 c-p-l0"
                        @error="handleErrorFn"
                        @launch="handleLaunch"
                        @ready="handleReady"
                      >
                        <script type="text/wxtag-template">
                          <style>.masker {width: 100%;height: 70px;opacity: 0}</style>
                          <span class="masker">立即跳转</span>
                        </script>
                      </wx-open-launch-weapp>
                    </template>
                  </div>
                </div>
              </div>
              <div class="c-bg-white c-text-hidden"  :style="(isSetPageBackground ? getBorderRadius(borderRadius, '0.4rem', 'bottom') : '')" :class="isSetPageBackground ? 'c-ph12 c-pv12' : 'c-pt12'" v-if="visible.titleVisible && visible.titleVisible != 0">
                <div
                  class="c-fc-xblack c-fw-b c-fs24 c-lh32 c-pz10 c-w100"
                  :class="visible.titleVisible == 1 ? 'c-text-ellipsis1' : 'c-text-ellipsis2'"
                  @click="clickMore(pIndex)"
                >
                  {{prod.objName}}
                </div>
              </div>
            </swiper-slide>
          </swiper>
        </template>
      </div>
    </div>
  </section>
</template>
<script>
import CustomImg from '@/components/templates/customImg.vue'
import waterFall from "@/components/templates/common/waterfall.vue"
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css';
import { getXgplayer, destoryPlayer } from "@/utils/xgplayerJs.js";
import { custIndex } from "@/mixin/custIndex.js";
import { customStyle } from '@/utils/customStyle.js'
import { utilJs } from "@/utils/common.js";
import { mapState } from "vuex";
export default {
  mixins: [custIndex, customStyle],
  components: {
    swiper,
    swiperSlide,
    CustomImg,
    waterFall
  },
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      },
    },
    index: {
      type: Number,
      default: 0,
    },
    upgradeMemberJump: {
      type: String,
      default: ''
    },
    pageName: {//首页 INDEX 预览页 PREVIEW_INDEX 微页面 MICRO_PAGE
      type: String,
      default: "INDEX"
    },
    visible:{
      type: Object,
      default: () => {
        return {
          titleVisible: 0
        }
      },
    },
  },
  data() {
    return {
      isSetPageBackground: sessionStorage.getItem("isSetPageBackground") || 0,
      players: [], // 播放器列表
      defaultVideoBg: 'https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/video-bg2.png', // 视频默认封面
      videoIndex: -1, // 组件视频播放索引
      prods: [],
      swiperOption: null,
      scrollPosition: 0, // 记录滚动高度
    };
  },
  computed: {
    ...mapState({
      currentVideoPlayerIndex: state => state.oem_store.currentVideoPlayerIndex
    }),
    /**
     * 判断是否设置一行两列的底部间距
     * index 索引值 num 2两列 3三列
     */
    isSetMarginBottom() {
      return function (index, list, num) {
       return (index < (list.length % num != 0 ? (list.length - list.length % num) : (list.length - num))) && list.length > num
      }
    },
    borderRadius() {
      return this.item.styleParam && this.item.styleParam.borderRadius ? this.item.styleParam.borderRadius : null
    },
    imageSetting() {
      return this.item.styleParam && this.item.styleParam.imageSetting ? this.item.styleParam.imageSetting : null
    },
    marginSettings() {
      return this.item.styleParam && this.item.styleParam.marginSettings ? this.item.styleParam.marginSettings : null
    },
    headLine() {
      return this.item.styleParam && this.item.styleParam.headLine ? this.item.styleParam.headLine : null
    },
  },
  watch: {
    currentVideoPlayerIndex: {
      handler() {
        this.pauseOtherVideo()
      },
      immediate: true,
    }
  },
  methods: {
    handleLaunch(e) {
      console.log('handleLaunch---', e)
    },
    handleErrorFn(e) {
      this.$showCjToast({
        text: e.errMsg || '无法打开小程序，请升级微信版本',
        type: "warn",
        time: 1500
      })
    },
    handleReady(e) {
      console.log('handleReady---', e)
    },
    /**
     * 暂停其他播放器
     * i: 当前播放视频索引
     */
    pauseOtherVideo() {
      if (this.players && this.players.length > 0) {
        this.players.forEach((item, index) => {
          // 判断播放dom是否还存在 || 当前组件的其他视频在播放 || 其他视频组件在播放
          if (item && item.el_ && ((index != this.videoIndex && (this.index == this.currentVideoPlayerIndex)) || (this.index != this.currentVideoPlayerIndex))) {
            // console.log('暂停播放了' + this.videoIndex);
            item.pause()
          }
        });
      }
    },
    /**
     * 点击播放视频
     * index: 点击当前视频索引
     * type: 1：大图 2：一行多列/一行两列/瀑布流
     */
    clickShowVideo(index, type) {
      this.videoIndex = index;
      this.$store.commit('updateCurrentVideoPlayerIndex', this.index);
      let value = this.item.items.prods[index];
      this.initTcPlayer(index, value.videoMp4, value.videoM3u8, value.videoCover, this.item.loop, value.height, value.width, 1);
    },
    // 通常模块点击跳转
    clickMore(index) {
      if (this.pageName == 'PREVIEW_INDEX') {
        return;
      }
      let data = this.item.items.prods[index];
      if (!data || (data && !data.navId)) return
      data.pageName = this.pageName;
      data.upgradeMemberJump = this.upgradeMemberJump;
      if (data.navId == "linkToMiniProgram") {
        utilJs.checkWxApp(); // 再次调用是为了跳转小程序返回后避免小程序环境值判断错误
        this.$nextTick(() => {
          // 微信需要判断是否是小程序环境 h5跳转采用组件跳转 小程序跳转使用跳转到小程序中间页面再点击跳转到其他小程序
          if (localStorage.getItem('isWxApp')) {
            let query = data.info.appID ? `?appId=${data.info.appID}&path=${encodeURIComponent(JSON.stringify(data.info.wechatUrl))}` : `?shortLink=${encodeURIComponent(data.info.wechatUrl)}`;
            utilJs.miniProgramGoTo('push', '/pages/home/goWxApp/index' + query);
          } else {
            if (!data.info || (data.info && !data.info.appID)) return
            this.appID = data.info.appID;
            this.wechatUrl = data.info.wechatUrl;
          }
        })
      }
      this.commonModuleRouterPush(data)
    },
    //单个视频播放器初始化
    initTcPlayer(index, mp4Url, videoM3u8, poster, loop, height, width, requestFullscreen) {
      let id = `_${this.index}myVideo${index}`;
      if (!document.getElementById(id) || (!mp4Url && !videoM3u8)) {
        return;
      }
      let curWidth = document.getElementById(id).clientWidth;
      document.getElementById(id).innerHTML = '';
      setTimeout(() => {
        //西瓜视频
        if (mp4Url == '' || mp4Url == null) {
          mp4Url = videoM3u8 ? videoM3u8 : '';
        }
        if (videoM3u8 == '' || videoM3u8 == null) {
          videoM3u8 = mp4Url ? mp4Url : '';
        }
        let isMobile = !!window.navigator.userAgent.match(/AppleWebKit.*Mobile.*/); //是否为移动终端
        let videoHight = this.imageSetting && this.imageSetting.ratio == 6 ?
                     parseInt(curWidth) / (9 / 16) :
                     this.imageSetting && this.imageSetting.ratio == 3 ?
                     parseInt(curWidth) / (16 / 9) : (parseInt(height) * curWidth / parseInt(width));
        // 轮播自适应处理  整个轮播的播放尺寸按照第一个视频的比例展示
        if (this.item.items.orderBy == 9 && this.imageSetting && this.imageSetting.ratio == 7) {
          let ratio = this.item.items.prods[0].width / this.item.items.prods[0].height;
          videoHight = this.item.items.prods[0].width && this.item.items.prods[0].height ? parseInt(curWidth) / ratio : 'auto';
        }
        let videoObj = {
          width: curWidth,
          height: videoHight,
          videoMp4: mp4Url,
          videoM3U8: videoM3u8,
          autoplay: requestFullscreen ? true : false,
          fluid: false,
          isCssFullScreen: false,
          videoInit: !isMobile ? -1 : 1,
          poster: poster || this.defaultVideoBg,
          loop: loop == 1 ? true : false,
          isFromMicro: true,
          controls: requestFullscreen ? false : true,
        }
        let video = getXgplayer(id, videoObj);
        if (video.playerType == "xg") {
          document.getElementById(id).className += ' c-pz1'
        }
        this.players.push(video);
        // 轮播视频播放器因为滑动切换轮播，导致滑动事件会穿透，影响视频底部操作栏的功能
        if (this.item.items.orderBy == 9) {
          let domList = document.getElementsByClassName("vjs-control-bar");
          domList.forEach(item => {
            item.classList.add('swiper-no-swiping')
          })
        }
        // 微信浏览器pc浏览的时候大图暂停无效
        video.on('pause', () => {
          if (this.item.items.orderBy == 4) {
            video.pause();
            console.log('点击暂停');
          }
        })
        // 当播放器能够开始播放视频时触发。
        video.on('canplay', () => {
          // 一行两列/多列/瀑布流点击直接全屏播放视频
          console.log('canplay');
          console.log(video.isFullscreen());
          if (requestFullscreen && !video.isFullscreen()) {
            video.requestFullscreen()
          }
        })
        // 视频点击播放后 其他视频播放器暂停
        video.on('play', () => {
          // 轮播 大图 暂停其他播放视频
          if (this.item.items.orderBy == 4 || this.item.items.orderBy == 9) {
            this.$set(this.item.items.prods[index], 'isShowBtn', false);
            this.videoIndex = index;
            this.$store.commit('updateCurrentVideoPlayerIndex', this.index);
            this.pauseOtherVideo();
          }
          // 进入播放非全屏 记录滚动条高度
          if (video.isFullscreen()) {
            this.scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
            console.log('当前滚动高度：' + this.scrollPosition);
          }
        })
        // 图片点击全屏播放后退出全屏 销毁视频对象
        video.on('fullscreenchange', () => {
          console.log(video.isFullscreen());
          if (!video.isFullscreen()) {
            // 退出全屏时，重置滚动位置, 目前就安卓测试退出全屏滚动高度回到顶部
            let isAnd = window.navigator.userAgent.indexOf('Android') > -1 || window.navigator.userAgent.indexOf('Adr') > -1;//andrio终端
            if (isAnd) {
              window.scrollTo(0, this.scrollPosition);
              console.log('触发滚动高度：' + this.scrollPosition);
            }
            setTimeout(() => {
              // 一行两列、一行多列、瀑布流
              if ([2, 5, 8].includes(this.item.items.orderBy)) {
                console.log('销毁');
                this.$set(this.item.items.prods[index], 'isShowBtn', true)
                this.players.forEach(item => {
                  destoryPlayer(item);
                });
              } else {
                console.log('退出全屏');
              }
            }, 500)
          }
          if (this.item.items.orderBy == 9) {
            if (document.getElementById("videoBox" + this.index).classList.contains('currentVideo')) {
              document.getElementById("videoBox" + this.index).classList.remove('currentVideo')
            } else {
              document.getElementById("videoBox" + this.index).classList.add('currentVideo')
            }
          }
        })
      }, 10);
    },
    playVideo(index) {
      this.players[index].play();
    }
  },
  mounted() {
    this.videoIndex = -1;
    this.players = [];
    if ([4, 9].includes(this.item.items.orderBy)) { // 轮播 大图
      this.$nextTick(() => {
        this.item.items.prods.map((value, index) => {
          this.initTcPlayer(index, value.videoMp4, value.videoM3u8, value.videoCover, this.item.loop, value.height, value.width);
        });
      })
    } else if (this.item.items.orderBy == 8) { // 瀑布流索引会因为左右排序重复，所以先确认唯一值
      this.$nextTick(() => {
        let prods = this.item.items.prods.map((item, index) => ({...item, iId: index}))
        this.prods = prods;
      })
    }
    // 轮播组件定义
    let that = this;
    that.swiperOption = {
      loop: false,
      speed: 400,
      autoplay: false,
      autoHeight: true,
      updateOnImagesReady: true,
      noSwipingClass: 'swiper-no-swiping',
      observer: true,
      on: {
        slideChange: function () {
          that.$nextTick(() => {
            that.pauseOtherVideo();
            let swiper = that.$refs[`mySwiper${that.index}`].swiper;
            that.videoIndex = swiper.activeIndex;
          })
        },
      }
    }
  },
  destroyed() {
    if (this.players && this.players.length > 0) {
      this.players.forEach(item => {
        destoryPlayer(item);
      });
    }
  },
};
</script>
<style lang="scss">
.w50-12 {
  width: calc(50% - 0.3rem);
}
.w100-12 {
  width: calc(100% - 0.3rem);
}
.mySwiper .swiper-pagination-bullets {
  bottom: 2.4rem;
  height: 10px;
}
.mySwiper .swiper-pagination-bullet-active {
  background: #FFFFFF;
}
.currentVideo {
  /* z-index: 999 !important; */
  position: relative;
}
.currentVideo .swiper-wrapper, .currentVideo .swiper-slide {
  transform: none !important;
}
.currentVideo .video-js {
  position: fixed !important;
  z-index: 999 !important;
}
.br-l-16 {
  border-top-left-radius: 0.4rem;
  border-bottom-left-radius: 0.4rem;
}
.videoBox .vjs-big-play-button {
  display: none !important;
}
.c-pz999 {
  z-index: 999 !important;
}
/deep/ {
  .video-rotate {
    padding: 0 0.5em 0 0.2em;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .item-rotate {
    font-size: 1.8em;
  }
}
.transform0{
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
}
</style>